<template>
  <div v-if="question">
    <el-button class="mb-4" type="primary" @click="goBack">返回题目列表</el-button>
    <h2 class="text-xl font-bold mb-4">题目详情</h2>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="ID">{{ question.questionId }}</el-descriptions-item>
      <el-descriptions-item label="题干"
        ><p class="markdown-content" v-html="renderMarkdown(`${question.content}`)" />
      </el-descriptions-item>
      <el-descriptions-item label="选项"
        ><p class="markdown-content" v-html="renderMarkdown(`${question.options}`)" />
      </el-descriptions-item>
      <el-descriptions-item label="科目">{{ question.subject }}</el-descriptions-item>
      <el-descriptions-item label="题型">{{ question.type }}</el-descriptions-item>
      <el-descriptions-item label="难度">{{ question.difficulty }}</el-descriptions-item>
      <el-descriptions-item label="知识点">
        <p v-if="question.knowledgePoints && question.knowledgePoints.length > 0">
          {{ question.knowledgePoints.map((kp) => kp.name).join(', ') }}
        </p>
        <p v-else>无</p>
      </el-descriptions-item>

      <el-descriptions-item label="解析">
        <p class="markdown-content" v-html="renderMarkdown(question.analysis)" />
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { apiClient, handleErrorAndRedirect } from '@/api'
import { renderMarkdown } from '@/api/utils.ts'

const route = useRoute()
const router = useRouter()
const question = ref<any>(null)

const goBack = () => {
  router.back()
}

const fetchDetail = async () => {
  try {
    const response = await apiClient.get(`/admin/questions/${route.params.id}`)
    question.value = response.data
    console.log(question.value)
  } catch (error) {
    handleErrorAndRedirect(error, '获取题目详情失败')
  }
}

onMounted(fetchDetail)
</script>
